<template>
  <div id="app">
    <map1 msg="Welcome to Your Vue.js App" class="map1"/>

    <tianditu
    class="map2"
      :areaList="areaList"
      @areaClick="handleClick"
      :areaCode="areaCode"
      v-if="areaList.length > 0"
    ></tianditu>
  </div>
</template>

<script>
import map1 from './components/map1.vue'
import tianditu from "./components/tianditu.vue"; //地图

export default {
  name: 'App',
  
  components: {
    map1,tianditu
  },
  data() {
    return {
      areaList: [
  {
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "id": 1,
    "areaCode": null,
    "companyName": "江苏鼎和水产科技发展有限公司",
    "deviceName": "鼎和-水质监测站",
    "geographicCoordinates": "119.30649,33.18555",
    "deviceType": "water",
    "status": "0",
    "delFlag": null,
    "areaName": "安宜镇"
  },
  {
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "id": 2,
    "areaCode": null,
    "companyName": "江苏红旗种业股份有限公司",
    "deviceName": "红旗种业-土壤墒情监测站西南",
    "geographicCoordinates": "119.29283,33.1579",
    "deviceType": "soil",
    "status": "0",
    "delFlag": null,
    "areaName": "安宜镇"
  },
  {
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "id": 3,
    "areaCode": null,
    "companyName": "江苏好润国蟹种业科技有限公司",
    "deviceName": "好润-水产监控录像机",
    "geographicCoordinates": "119.40864,33.09445",
    "deviceType": "camera",
    "status": "0",
    "delFlag": null,
    "areaName": "柳堡镇"
  },
  {
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "id": 4,
    "areaCode": null,
    "companyName": "江苏红旗种业股份有限公司",
    "deviceName": "红旗种业-虫情检测-西北",
    "geographicCoordinates": "119.49284,33.21134",
    "deviceType": "insect",
    "status": "0",
    "delFlag": null,
    "areaName": "氾水镇"
  },
  {
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "id": 5,
    "areaCode": null,
    "companyName": "江苏红旗种业股份有限公司",
    "deviceName": "红旗种业-农田气候气象站",
    "geographicCoordinates": "119.41865,33.19997",
    "deviceType": "weather",
    "status": "0",
    "delFlag": null,
    "areaName": "夏集镇"
  },
  {
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "id": 6,
    "areaCode": null,
    "companyName": "江苏好润国蟹种业科技有限公司",
    "deviceName": "好润-环境监测一体杆",
    "geographicCoordinates": "119.61127,33.30755",
    "deviceType": "weather",
    "status": "0",
    "delFlag": null,
    "areaName": "射阳湖镇"
  }
],
areaCode: "",
    };
  },

  methods: {
    async handleClick(id) {
    console.log(id);
      // this.getWLresData(id);
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
}
*{ margin: 0; padding: 0;}
.map1{ width: 100%; height: 1000px; display: block; float: left;position: relative;}
.map2{ width: 100%; height: 1000px; display: block; float: left;position: relative;}
</style>
